import React, { Component } from 'react';
import { View, Text } from '@tarojs/components';
import { AtIcon } from 'taro-ui';
import Taro from '@tarojs/taro';
import './index.scss'


export default class Index extends Component {
  constructor(props = {}) {
    super(props);
    if (!props.data) props.data = {};
    this.state = {
      price: props.data.price || null, // 价钱
      phone: props.data.phone || '', // 电话
      start: props.data.start || '', // 出发点
      end: props.data.end || '', // 目的地
      points: props.data.points || [], // 途径点
      startTime: props.data.startTime || '', // 发车时间
      capacity: props.data.capacity || '', // 可载多少人
      full: null, // 是否载满, 重新发布重置 full 与 时间, 一个人标记就设置为满了, 同时记录标记人的 uuid, 车主可以反馈没有坐满,此时根据 uuid 标记用户虚假标记
    }
  }

  componentWillReceiveProps(nextProps, nextContext) {
    this.setState({
      price: nextProps.data.price || null, // 价钱
      phone: nextProps.data.phone || '', // 电话
      start: nextProps.data.start || '', // 出发点
      end: nextProps.data.end || '', // 目的地
      points: nextProps.data.points || [], // 途径点
      startTime: nextProps.data.startTime || '', // 发车时间
      capacity: nextProps.data.capacity || '', // 可载多少人
      full: nextProps.data.full,
    })
  }
  componentWillMount () { }
  componentDidMount () { }
  componentWillUnmount () { }
  componentDidShow () { }
  componentDidHide () { }
  handleClick() {
    this.props.onClick && this.props.onClick.call(null)
  }
  // 复制电话号
  copy() {
    const { phone } = this.state;
    Taro.setClipboardData({
      data: String(phone),
      fail(e) {
        Taro.showToast({
          title: e.errorMessage || e.message,
          icon: 'none'
        })
      }
    });
  }

  render () {
    const { start, end, points, price, startTime, phone, capacity } = this.state;
    const { showPhone } = this.props;
    return (
      <View className="card" onClick={this.handleClick.bind(this)}>
        <View className="flex-row">
          <Text>{start}</Text>
          <AtIcon value="arrow-right"></AtIcon>
          <Text>{end}</Text>
        </View>
        {
          (points && !!points.length) && <View className="points">
            <Text>途径: </Text>
            {points.map(item => <Text className="points-item">{item}</Text>)}
          </View>
        }
        <View>出发时间: {startTime}</View>
        <View>
          { price && <Text className="price">价格¥: {price}</Text> }
          { capacity && <Text className="capacity">可载: {capacity} 人</Text> }
        </View>
        {
          showPhone && <View className="phone" onClick={this.copy.bind(this)}>
            <Text>电话(点击复制): {phone}</Text>
          </View>
        }
      </View>
    )
  }
}
